<template>
  <div class="approver-drawer">
    <el-drawer
      v-model="approverDrawer"
      :append-to-body="true"
      direction="rtl"
      size="550px"
    >
      <template #header>
        <div>
          <input
            v-if="isInput"
            v-model="approverConfig.nodeName"
            type="text"
            placeholder="审批人"
            @blur="isInput=false"
          >
          <el-link v-else @click.stop="isInput=true">
            <el-icon class="m-icon"><i-ep-edit-pen /></el-icon>
            {{ approverConfig && approverConfig.nodeName }}
          </el-link>
        </div>
      </template>
      <template #default>
        <div class="approver_content" @click="isInput=false">
          <el-radio-group v-model="approverConfig.settype" @change="changeType">
            <el-radio
              v-for="(item, index) in getTypes"
              :key="index"
              style="width: 110px;"
              :label="item.id"
            >
              {{ item.name }}
            </el-radio>
          </el-radio-group>

          <el-divider />

          <div v-if="approverConfig.settype==1">
            <el-button type="primary" @click="userDialogVisible=true">添加/修改成员</el-button>
            <div style="display: flex;margin-top: 10px;flex-wrap: wrap;">
              <el-tag
                v-for="(tag,index) in approverConfig.nodeUserList"
                :key="index"
                style="margin: 5px;"
                closable
                effect="plain"
                type="info"
                @close="handleClose(tag)"
              >
                {{ tag.name }}
              </el-tag>
            </div>
          </div>

          <div v-if="approverConfig.settype==2">
            <span>发起人的：</span>
            <el-select v-model="approverConfig.directorLevel">
              <el-option
                v-for="level in directorMaxLevel"
                :key="level"
                :label="level==1 ? '直接主管':'第'+level+'级主管'"
                :value="level"
              />
            </el-select>
            <el-checkbox v-model="approverConfig.superiorApproval" label="找不到主管时，由上级主管代审批" />
          </div>

          <div v-if="approverConfig.settype==4">
            <p>审批人员</p>
            <el-radio-group v-model="approverConfig.selectMode">
              <el-radio-button :label="1">自选单人</el-radio-button>
              <el-radio-button :label="2">自选多人</el-radio-button>
            </el-radio-group>
          </div>

          <div v-if="approverConfig.settype==4">
            <p>选择范围</p>
            <el-select v-model="approverConfig.selectRange" @change="changeRange">
              <el-option label="所有人" :value="1" />
              <el-option label="指定成员" :value="2" />
              <el-option v-if="roleList" label="角色" :value="3" />
            </el-select>

            <el-button
              v-if="approverConfig.selectRange==2"
              type="primary"
              style="margin-left: 10px;"
              @click="userDialogVisible=true"
            >
              添加/修改成员
            </el-button>
            <el-button
              v-if="approverConfig.selectRange==3"
              type="primary"
              style="margin-left: 10px;"
              @click="roleDialogVisible=true"
            >
              添加/修改角色
            </el-button>
            <div style="display: flex;margin-top: 10px;flex-wrap: wrap;">
              <el-tag
                v-for="(tag,index) in approverConfig.nodeUserList"
                :key="index"
                style="margin: 5px;"
                closable
                effect="plain"
                type="info"
                @close="handleClose(tag)"
              >
                {{ tag.name }}
              </el-tag>
            </div>
          </div>

          <div v-if="approverConfig.settype==4 && approverConfig.selectMode==2">
            <p>多人审批时采用的审批方式</p>
            <el-radio-group
              v-model="approverConfig.examineMode"
              style="flex-direction: column;align-items: flex-start;"
            >
              <el-radio :label="1">会签(须所有审批人同意)</el-radio>
              <el-radio :label="2">或签(一名审批人同意或拒绝即可)</el-radio>
            </el-radio-group>
          </div>

          <div v-if="approverConfig.settype==7">
            <p>审批终点</p>
            <span>发起人的：</span>
            <el-select v-model="approverConfig.examineEndDirectorLevel">
              <el-option
                v-for="level in directorMaxLevel"
                :key="level"
                :label="level==1 ? '最高主管':'第'+level+'层级主管'"
                :value="level"
              />
            </el-select>
          </div>

          <div v-if="approverConfig.settype==5">
            <p>该审批节点设置“发起人自己”后，审批人默认为发起人</p>
          </div>

          <div v-else>
            <p>审批人不存在时</p>
            <el-radio-group v-model="approverConfig.noHanderAction">
              <el-radio :label="1">自动通过</el-radio>
              <el-radio :label="2">自动驳回</el-radio>
            </el-radio-group>
          </div>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="onCancel">取消</el-button>
          <el-button type="primary" @click="onSave">保存</el-button>
        </div>
      </template>
    </el-drawer>
    <user-dialog
      v-model="approverConfig.nodeUserList"
      v-model:visible="userDialogVisible"
      :tree-list="treeList"
      :check-strictly="approverConfig.settype==4"
    />
    <user-dialog
      v-model="approverConfig.nodeUserList"
      v-model:visible="roleDialogVisible"
      :role-list="roleList"
      :check-strictly="false"
    />
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
import func from '../../utils/preload'

export default {
  props: {
    /** 主管层级数 */
    directorMaxLevel: {
      type: Number,
      default: 5
    },
    /** 成员列表 */
    treeList: {
      type: Array,
      default: () => []
    },
    /** 角色列表 */
    roleList: {
      type: Array,
      default: () => []
    },
    /**
     * 审核类型
     * 1、指定成员
     * 2、主管
     * 4、发起人自选
     * 5、发起人自己
     * 7、连续多级主管
     */
    types: {
      type: Array,
      default: null
    }
  },
  setup(props) {
    const store = useStore()
    const approverDrawer = computed({
      get() {
        return store.state.app.workflow.approverDrawer
      },
      set(flag) {
        store.dispatch('app/workflow/setApprover', flag)
      }
    })

    const typesList = [
      { id: 1, name: '指定成员' },
      { id: 2, name: '主管' },
      { id: 4, name: '发起人自选' },
      { id: 5, name: '发起人自己' },
      { id: 7, name: '连续多级主管' }
    ]

    const getTypes = computed(() => {
      if (props.types) {
        return typesList.filter(m => props.types.some(val => val === m.id))
      }
      return typesList
    })

    /** 编辑标题 */
    const isInput = ref(false)

    /** 选择成员弹窗 */
    const userDialogVisible = ref(false)

    /** 选择角色弹窗 */
    const roleDialogVisible = ref(false)

    const approverConfig = computed(() => store.state.app.workflow.approverConfig1.value || { nodeUserList: [] })

    /** 审核操作类型 */
    const changeType = (val) => {
      /** 初始化 */
      approverConfig.value.selectMode = 1 // 自选一个人
      approverConfig.value.selectRange = 1 // 选择范围
      approverConfig.value.examineMode = 1 // 依次审批
      approverConfig.value.noHanderAction = 1 // 自动通过
      approverConfig.value.nodeUserList = [] // 指定成员
    }

    /** 删除指定成员 */
    const handleClose = (tag) => {
      approverConfig.value.nodeUserList.splice(approverConfig.value.nodeUserList.indexOf(tag), 1)
    }

    /** 切换选择范围 */
    const changeRange = () => {
      approverConfig.value.nodeUserList = []
    }

    /** 保存 */
    const onSave = () => {
      approverConfig.value.error = !func.setApproverStr(approverConfig.value)
      store.dispatch('app/workflow/setApproverConfig', {
        value: approverConfig,
        flag: true,
        id: store.state.app.workflow.approverConfig1.id
      })
      onCancel()
    }

    /** 取消 */
    const onCancel = () => {
      store.dispatch('app/workflow/setApprover', false)
    }

    return {
      approverDrawer,
      isInput,
      userDialogVisible,
      roleDialogVisible,
      approverConfig,
      getTypes,
      changeType,
      handleClose,
      changeRange,
      onSave,
      onCancel
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
